* {
  margin: 0;
  padding: 0;
}

.title {
  font-size: 40px;
  font-family: 'Pacifico', cursive;
  color: black;
  text-align: center;
}

.center {
  text-align: center;
  color: black;
}


a {
  color: #34495e;
}


/*WRAPPER*/

#wrapper {
  width: 520px;
  height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  &:after {
    content: '';
    background-image: url(../images/game/bg_after.png);
    background-size: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    width: 491px;
    height: 489px;
    position: absolute;
    top: 13px;
    left: 16px;
    z-index: 999;
    opacity: 0;
    animation: bg_higary_after .3s linear infinite;

    @keyframes bg_higary_after {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }

  &:before {
    content: '';
    background-image: url(../images/game/bg_before.png);
    background-size: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    width: 491px;
    height: 489px;
    position: absolute;
    top: 13px;
    left: 16px;
    z-index: 999;
    opacity: 0;
    animation: bg_higary_before .3s linear infinite;
    animation-delay: .15s;

    @keyframes bg_higary_before {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }
}

.arrow {
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

}

#txt {
  color: #eaeaea;
}


/*WHEEL*/

#wheel {
  width: 464px;
  height: 464px;
  border-radius: 50%;
  position: relative;
  // overflow: hidden;
  transform: rotate(0deg);

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 464px;
    height: 464px;
    border-radius: 50%;
    background-color: #dab97b;
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    top: -26px;
    left: -28px;
    width: 520px;
    height: 520px;
    background-image: url(../images/game/game_bg_1_after.png);
    // z-index: 9999;
    z-index: -1;
  }

  .wheel{
    position: absolute;
    top: -2px;
    left: 0;
    transition: all 6s cubic-bezier(0, .99, .44, .99);
    overflow: hidden;
    width: 464px;
    height: 464px;
    border-radius: 50%;
    border: 5px solid #fff6de;
    box-sizing: border-box;

    .sec {
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 232px 61px 0px;
      // border-color: #19c transparent;
      -webkit-transform-origin: 61px 232px;
      transform-origin: 61px 232px;
      left: 166px;
      top: -4px;
      opacity: 1;
      .fa {
        margin-top: -215px;
        color: rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 10000000;
        display: block;
        text-align: center;
        font-size: 24px;
        margin-left: -32px;
        width: 64px;
        height: 64px;
        text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
      
        &.fa_active {
          animation: bounce .3s ease-out infinite;
          transform: scale(1);
      
          @keyframes bounce {
            0% {
              transform: scale(.8);
            }
      
            50% {
              transform: scale(1.2);
            }
      
            100% {
              transform: scale(.8);
            }
          }
        }
      }
      &.on {
        border-color: #a16e24 transparent !important;
        .icons {
          &:after {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            background-image: url(../images/game/icon_hegary_after.png);
            background-position: center;
            display: block;
            width: 121px;
            height: 121px;
            z-index: -1;
            transform-origin: center;
            animation: higary_after 5s linear infinite;

            @keyframes higary_after {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }
          }

          &:before {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            background-image: url(../images/game/icon_hegary_before.png);
            background-position: center;
            display: block;
            width: 121px;
            height: 121px;
            z-index: -1;
            transform-origin: center;
            animation: higary_before 6s linear infinite;

            @keyframes higary_before {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(-360deg);
              }
            }
          }
        }
      }
      &:nth-child(1) {
        transform: rotate(30deg);
      }
      &:nth-child(2) {
        transform: rotate(60deg);
      }
      &:nth-child(3) {
        transform: rotate(90deg);
      }
      &:nth-child(4) {
        transform: rotate(120deg);
      }
      &:nth-child(5) {
        transform: rotate(150deg);
      }
      &:nth-child(6) {
        transform: rotate(180deg);
      }
      &:nth-child(7) {
        transform: rotate(210deg);
      }
      &:nth-child(8) {
        transform: rotate(240deg);
      }
      &:nth-child(9) {
        transform: rotate(270deg);
      }
      &:nth-child(10) {
        transform: rotate(300deg);
      }
      &:nth-child(11) {
        transform: rotate(330deg);
      }
      &:nth-child(12) {
        transform: rotate(360deg);
      }
      &:nth-child(odd) {
        border-color: #fce6bc transparent;
      }
      &:nth-child(even) {
        border-color: #fff6e7 transparent;
      }
    }
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      border-radius: 50%;
      box-shadow: inset 0px 0px 6px 5px #d8b26b;
      display: block;
      width: 455px;
      height: 455px;
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
    }
  }

  .wheel_two {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 6s cubic-bezier(0, .99, .44, .99);
    overflow: hidden;
    width: 274px;
    height: 274px;
    border-radius: 50%;
    border: 5px solid #fff6d0;
    box-shadow: 0 0 5px 2px #e6cca8;
    box-sizing: border-box;
    background-color: #29b981;
    .sec {
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 136px 55px 0px;
      // border-color: #19c transparent;
      transform-origin: 55px 136px;
      left: 79px;
      top: -4px;
      opacity: 1;
      .fa {
        margin-top: -125px;
        color: rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 10000000;
        display: block;
        text-align: center;
        font-size: 24px;
        margin-left: -32px;
        width: 64px;
        height: 64px;
        text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
      
        &.fa_active {
          animation: bounce .3s ease-out infinite;
          transform: scale(1);
      
          @keyframes bounce {
            0% {
              transform: scale(.8);
            }
      
            50% {
              transform: scale(1.2);
            }
      
            100% {
              transform: scale(.8);
            }
          }
        }
      }
      &.on {
        border-color: #17895a transparent !important;
        .icons {
          &:after {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            background-image: url(../images/game/icon_hegary_after.png);
            background-position: center;
            display: block;
            width: 121px;
            height: 121px;
            z-index: -1;
            transform-origin: center;
            animation: higary_after 5s linear infinite;

            @keyframes higary_after {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }
          }

          &:before {
            content: '';
            position: absolute;
            top: -30px;
            left: -30px;
            background-image: url(../images/game/icon_hegary_before.png);
            background-position: center;
            display: block;
            width: 121px;
            height: 121px;
            z-index: -1;
            transform-origin: center;
            animation: higary_before 6s linear infinite;

            @keyframes higary_before {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(-360deg);
              }
            }
          }
        }
      }
      &:nth-child(1) {
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        transform: rotate(90deg);
      }
      &:nth-child(3) {
        transform: rotate(135deg);
      }
      &:nth-child(4) {
        transform: rotate(180deg);
      }
      &:nth-child(5) {
        transform: rotate(225deg);
      }
      &:nth-child(6) {
        transform: rotate(270deg);
      }
      &:nth-child(7) {
        transform: rotate(315deg);
      }
      &:nth-child(8) {
        transform: rotate(360deg);
      }
      &:nth-child(odd) {
        border-color: #54d393 transparent;
      }
      &:nth-child(even) {
        border-color: #35c98f transparent;
      }
    }
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      border-radius: 50%;
      box-shadow: inset 0px 0px 6px 5px #1ea273;
      display: block;
      width: 264px;
      height: 264px;
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
    }
  }
  .count {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 145px;
    background-image: url(../images/game/count.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    &_time {
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      margin-top: 15px;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    }
  
    &_round {
      font-size: 16px;
      color: #fff;
    }
  }
}

#spin {
  width: 68px;
  height: 68px;
  position: fixed;
  top: 20%;
  right: 50px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
  z-index: 1000;
  background: #fff;
  cursor: pointer;
  font-family: 'Exo 2', sans-serif;
  user-select: none;
  #inner-spin {
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: red;
    z-index: 999;
    box-shadow: rgba(255, 255, 255, 1) 0px -2px 0px inset, rgba(255, 255, 255, 1) 0px 2px 0px inset, rgba(0, 0, 0, 0.4) 0px 0px 5px;
    background: rgb(255, 255, 255);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
    filter: blur(1px);
  }
  &:after {
    content: "SPIN";
    text-align: center;
    line-height: 68px;
    color: #CCC;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 100000;
    width: 68px;
    height: 68px;
    display: block;
  }

  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #ffffff transparent;
    top: -12px;
    left: 14px;
  }
}

.icons {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  // background-size: 100% 100%;
  // background-size: 64px 64px;
  display: flex;
  width: 100%;
  height: 100%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  &_purple {
    background-image: url(../images/game/icon_purple.png);

    &.active {
      background-image: url(../images/game/gem2.gif);
      background-size: 92px 92px;
      position: relative;
    }
  }

  &_blue {
    background-image: url(../images/game/icon_blue.png);

    &.active {
      background-image: url(../images/game/gem3.gif);
      background-size: 92px 92px;
    }
  }

  &_green {
    background-image: url(../images/game/icon_green.png);

    &.active {
      background-image: url(../images/game/gem1.gif);
      background-size: 92px 92px;
    }
  }

  &_red {
    background-image: url(../images/game/icon_red.png);

    &.active {
      background-image: url(../images/game/gem5.gif);
      background-size: 92px 92px;
    }
  }

  &_orange {
    background-image: url(../images/game/icon_orange.png);

    &.active {
      background-image: url(../images/game/gem4.gif);
      background-size: 92px 92px;
    }
  }
}